<% include include/header.html %>  
<style>

  .axis path,
  .axis line{
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
  }

  .axis text {
    font-family: sans-serif;
    font-size: 11px;
  }

  .MyRect {
    /*fill: steelblue;*/
  }

  .MyText {
    fill: white;
    text-anchor: middle;
  }

</style>
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Dashboard
        <small>Control panel</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">Dashboard</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content dashboard-page">

    </section>
    <!-- /.content -->
  </div>
<script src="bower_components/d3/d3.js"></script>
<script>
  // var width = 400;
  // var height = 400;

  // var svg = d3.select('.dashboard-page')
  //   .append('svg')
  //   .attr('width', width)
  //   .attr('height', height);

  // var padding = {left: 30, right: 30, top: 20, bottom: 20};
  // var dataset = [10, 20, 30, 40, 33, 24, 12, 5];
  // var xScale = d3.scaleBand()
  //   .domain(d3.range(dataset.length))
  //   .range([0, width - padding.left - padding.right])
  //   .paddingInner(0.2)
  //   .paddingOuter(0.1);

  // var yScale = d3.scaleLinear()
  //   .domain([0, d3.max(dataset)])
  //   .range([height - padding.top - padding.bottom, 0]);

  // var xAxis = d3.axisBottom(xScale);
  // var yAxis = d3.axisLeft(yScale);

  // var rectPadding = 4;
  // var rects = svg.selectAll('.MyRect')
  //   .data(dataset)
  //   .enter()
  //   .append('rect')
  //   .attr('class', 'MyRect')
  //   .attr('transform', 'translate('+padding.left+', '+padding.top+')')
  //   .attr('x', function(d, i) {
  //     return xScale(i);
  //   })
  //   .attr('y', function(d,i){
  //     var min = yScale.domain()[0];
  //     return yScale(min);
  //   })
  //   // .transition()
  //   // .delay(function(d,i){
  //   //   return i * 50;
  //   // })
  //   // .duration(1000)
  //   .attr("y",function(d){
  //       return yScale(d);
  //   })
  //   .attr("width", xScale.bandwidth() )
  //   .attr("height", function(d){
  //     return height - padding.top - padding.bottom - yScale(d);
  //   })
  //   .attr("fill","steelblue")
  //   .on('mouseover', function(d,i) {
  //     d3.select(this).attr('fill','red');
  //   })
  //   .on('mouseout', function(d,i){
  //     d3.select(this).attr('fill','steelblue');
  //   });

  //   //添加文字元素
  //   var texts = svg.selectAll(".MyText")
  //     .data(dataset)
  //     .enter()
  //     .append("text")
  //     .attr("class","MyText")
  //     .attr("transform","translate(" + padding.left + "," + padding.top + ")")
  //     .attr("x", function(d,i){
  //         return xScale(i);
  //     })
  //     .attr("y",function(d){
  //         var min = yScale.domain()[0];
  //         return yScale(min);
  //     })
  //     .transition()
  //     .delay(function(d,i){
  //       return i * 50;
  //     })
  //     .duration(1000)
  //     .attr("y",function(d){
  //         return yScale(d);
  //     })
  //     .attr("dx",function(){
  //         return (xScale.bandwidth() - rectPadding)/2;
  //     })
  //     .attr("dy",function(d){
  //         return 20;
  //     })
  //     .text(function(d){
  //         return d;
  //     });

  //     //添加x轴
  //     svg.append("g")
  //       .attr("class","axis")
  //       .attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")
  //       .call(xAxis); 
              
  //     //添加y轴
  //     svg.append("g")
  //       .attr("class","axis")
  //       .attr("transform","translate(" + padding.left + "," + padding.top + ")")
  //       .call(yAxis);


  // var pie = d3.pie();
  // var piedata = pie(dataset);
  // var outerRadius = 150; //外半径
  // var innerRadius = 0; //内半径，为0则中间没有空白

  // var color = d3.scaleQuantize()
  //   .domain([d3.min(dataset), d3.max(dataset)])
  //   .range(["red", "white", "green", "yellow", "grey", "blue", "black", "orange"]);

  // var arc = d3.arc()
  //   .innerRadius(0)
  //   .outerRadius(100);

  // var svg1 = d3.select('.dashboard-page')
  //   .append('svg')
  //   .attr('width', width)
  //   .attr('height', height);
  // var arcs = svg1.selectAll('g')
  //   .data(piedata)
  //   .enter()
  //   .append('g')
  //   .attr("transform","translate("+ (width/2) +","+ (width/2) +")");

  // arcs.append("path")
  //   .attr("fill",function(d,i){
  //       return color(d.data);
  //   })
  //   .attr("d",function(d){
  //       return arc(d);   //调用弧生成器，得到路径值
  //   });

//https://observablehq.com/@d3/force-directed-graph
//https://blog.csdn.net/wanglei1991gao/article/details/79551724

drag = simulation => {
  
  function dragstarted(d) {
    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
    d.fx = d.x;
    d.fy = d.y;
  }
  
  function dragged(d) {
    d.fx = d3.event.x;
    d.fy = d3.event.y;
  }
  
  function dragended(d) {
    if (!d3.event.active) simulation.alphaTarget(0);
    d.fx = null;
    d.fy = null;
  }
  
  return d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended);
}

color = () => {
  const scale = d3.scaleOrdinal(d3.schemeCategory10);
  return d => scale(d.group);
}
let height = 600, width = 600;
let promise = d3.json("https://gist.githubusercontent.com/mbostock/4062045/raw/5916d145c8c048a6e3086915a6be464467391c62/miserables.json")
promise.then(data => {
  chart(data)
})
chart = (data) => {
  const links = data.links.map(d => Object.create(d));
  const nodes = data.nodes.map(d => Object.create(d));

  const simulation = d3.forceSimulation(nodes)
      .force("link", d3.forceLink(links).id(d => d.id))
      .force("charge", d3.forceManyBody())
      .force("center", d3.forceCenter(width / 2, height / 2));

  const svg = d3.select('.dashboard-page')
      .append('svg')
      .attr('width', width)
      .attr('height', height);

  const link = svg.append("g")
      .attr("stroke", "#999")
      .attr("stroke-opacity", 0.6)
      .selectAll("line")
      .data(links)
      .join("line")
      .attr("stroke-width", d => Math.sqrt(d.value));

  const node = svg.append("g")
      .attr("stroke", "#fff")
      .attr("stroke-width", 1.5)
      .selectAll("circle")
      .data(nodes)
      .join("circle")
      .attr("r", 5)
      .attr("fill", color)
      //.call(drag(simulation));

  node.append("title")
      .text(d => d.id);

  simulation.on("tick", () => {
    link
        .attr("x1", d => d.source.x)
        .attr("y1", d => d.source.y)
        .attr("x2", d => d.target.x)
        .attr("y2", d => d.target.y);

    node
        .attr("cx", d => d.x)
        .attr("cy", d => d.y);
  });

  //invalidation.then(() => simulation.stop());

  return svg.node();
}

</script>
<% include include/footer.html %>